<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .container {
        width: 100%;
    }
    .search-btn {
        margin-left: 20px;
    }

    .tableBar {
        justify-content: flex-start !important;
    }

    .info-box {
        margin: -15px -44px 20px;
    }

    .info-box .item-box {
        display: flex;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        text-align: left;
        margin-bottom: 14px;
    }

    .info-box .item-box:last-child {
        margin-bottom: 0;
    }

    .info-box .item-box .label {
        width: 96px;
    }

    .info-box .item-box .des {
        flex: 1;
        color: #333333;
    }
    #popupde{
        width: 400px;
        height: 300px;
        z-index: 2;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -150px;
        overflow: hidden;
        display: none;
        background-color: white;
    }
    #popup{
        position: fixed;
        left: 0;
        top:0;
        width: 100%;
        height: 100%;
        background-color: grey;
        z-index: 1;
        opacity: 0.8;
        display: none;
    }
    #number{
        display: block;
        width: 90%;
        height: 30px;
        margin: 40px auto;
        border: solid 1px #248CD6;
        border-radius: 5px;
        outline: none;
        padding-left: 5px;
    }
    #number:focus{
        border: solid 1px #248CD6;
        border-radius: 5px;
        box-shadow: 0 0 8px #248CD6;
    }
    .submit{
        display: flex;
        width: 90%;
        height: 40px;
        margin: 20px auto;
    }
    .el-cancel,.el-confirm{
        flex: 1;
        margin: 2px;
        border: none;
        transition: all 0.2s;
    }
    .el-cancel:hover,.el-confirm:hover{
        background-color: #248CD6;
        color: white;
    }
    .top{
        width: 100%;
    }
    .top a{
        float: right;
        margin-right: 2px;
        text-decoration: none;
        color: #3A3C3D;
        opacity: 0.5;
    }
    .top a:hover{
        opacity: 1;
    }
</style>


<div id="order-app" class="dashboard-container">
    <div class="container">
        <div class="tableBar">
            <div class="el-input el-input--prefix" style="width: 250px;">
                <input type="text" autocomplete="off" placeholder="请输入订单号" class="el-input__inner ei-sd">
                <span class="el-input__prefix">
                    <i class="el-input__icon el-icon-search" style="cursor: pointer;"></i>
                </span>
            </div>
            <div class="el-date-editor el-range-editor el-input__inner el-date-editor--datetimerange" style="width: 400px; margin-left: 20px;">
                <i class="el-input__icon el-range__icon el-icon-time"></i>
                <input type="date" autocomplete="off" placeholder="开始日期" id="startTime" class="el-range-input">
                <span class="el-range-separator">至</span>
                <input type="date" autocomplete="off" placeholder="结束日期" id="endTime" class="el-range-input">
                <i class="el-input__icon el-range__close-icon"></i>
            </div>
            <button type="button" class="el-button search-btn el-button--primary" id="btn-search">
                <span>查询</span>
            </button>
        </div>
        <div class="el-table tableBox el-table--fit el-table--striped el-table--enable-row-hover">
            <div class="hidden-columns">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="el-table__header-wrapper">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 100%;">
                    <thead>
                        <tr class="">
                            <th colspan="1" rowspan="1" class="el-table_1_column_1   #tbody  is-leaf" style="width: 25px;">
                                <div class="cell" style="padding-left: 11px">
                                    <label class="el-checkbox is-disabled">
                                        <span class="el-checkbox__input">
                                            <input type="checkbox" value="" onchange='commonChoiceAll()'>
                                        </span>
                                    </label>
                                </div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_2     is-leaf">
                                <div class="cell">订单号</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_3     is-leaf">
                                <div class="cell">订单状态</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_4     is-leaf">
                                <div class="cell">用户</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_5     is-leaf">
                                <div class="cell">手机号</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_6     is-leaf">
                                <div class="cell">地址</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_7     is-leaf">
                                <div class="cell">下单时间</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_8     is-leaf">
                                <div class="cell">实收金额</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_9     is-leaf">
                                <div class="cell">操作</div>
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div id="popup"></div>
            <div id="popupde">
                <div class="top">弹窗
                    <a href="javascript:void(0)" class="el-cancel" >&#935;</a>
                </div>
<!--               隐藏域-->
                <input id="orderId" type="hidden">
                <div class="el-god">
                    <input type="radio" id="value1" name="typeId" value="已支付" style="margin-top: 13px;">已支付 </label>
                    <input type="radio" id="value2" name="typeId" value="未支付" checked style="margin-top: 13px;"> 未支付 </label>
                    <input type="radio" id="value3" name="typeId" value="上架" style="margin-top: 13px;"> 上架 </label>
                    <input type="radio" id="value4" name="typeId" value="下架" checked style="margin-top: 13px;"> 下架 </label>
                </div>
                <div class="submit">
                    <button class="el-cancel" >取消</button>
                    <button class="el-confirm" >确定</button>
                </div>
            </div>
            <div class="el-table__body-wrapper is-scrolling-none">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
                    <tbody id="tbodyId"></tbody>
                </table>
                <div class="el-table__empty-block" style="height: 100%; width: 100%;display: none">
                    <span class="el-table__empty-text">暂无数据</span>
                </div>
            </div>
            <div class="el-table__column-resize-proxy" style="display: none;"></div>
        </div>
        <div class="pageList el-pagination" id="pageId">

        </div>
    </div>
    <div class="el-dialog__wrapper" style="display: none;">
        <div role="dialog" aria-modal="true" aria-label="订单信息" class="el-dialog" style="margin-top: 15vh; width: 30%;">
            <div class="el-dialog__header">
                <span class="el-dialog__title">订单信息</span>、
                <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                    <i class="el-dialog__close el-icon el-icon-close"></i>
                </button>
            </div>
        </div>
    </div>
</div>
<script src="api/order/order.js"></script>
<div role="alert" class="el-message el-message--error el-message-fade-leave-active el-message-fade-leave-to" style="top: 20px; z-index: 2000;">
    <i class="el-message__icon el-icon-error"></i>
    <p class="el-message__content">后端接口连接异常</p>
</div>


<script>
    $(function (){
        $(".el-button--primary").on("click",doGetObjects);
        $("#load-order-id").data("isDeletePage", false);
        $(".el-cancel").on("click",cancel);//弹窗取消
        $(".el-confirm").on("click",confirme);//弹窗确定
        //先加载数据，再查询数据
        $("#pageId").load("page/page",function(){
            doGetObjects();
        })
    })
    /**
     * 初始加载
     */
    function doGetObjects(){
        debugger
        var url = "order/findOrder";
        var curPage = $("#pageId").data("curPage");
        var params = {
            "orderNumber" : $(".ei-sd").val(),
            "curPage" :curPage ? curPage : 1,
            "pageSize" : 5,
            "startTime": $("#startTime").val(),
            "endTime": $("#endTime").val()
        };
        if ($("#load-order-id").data("isDeletePage")) {
            params.state = 2;
        }
        $.get(url,params,function(result){
            if(result.state == 0){
                commonShowTips(result.message);
            }else{
                loadRoleData(result.data.pageData);//加载表格主体数据
                setPageData(result.data);//分页
            }
        })
    }

    /**
     * 加载主体数据
     */
    function loadRoleData(data){
        debugger
        var tbody = $("#tbodyId");
        tbody.empty();
        for (var i = 0;i < data.length;i++){
            var d = data[i];
            var stateStr = "";
            if (d.state == 1) {
                stateStr = "上架";
            } else if (d.state == 2) {
                stateStr = "下架";
            } else if (d.state == 3) {
                stateStr = "已支付";
            }else if (d.state == 4) {
                stateStr = "未支付";
            }
            var tr = "<tr>"+
                "<td class='el-table_1_column_1   el-table-column--selection  is-leaf' style='width: 25px;'><div class='cell' style='padding-left: 11px'>" +
                "<label class='el-checkbox'><span class='el-checkbox__input'>" +
                "<input type='checkbox' class='input-data' aria-hidden='false'' value='" + d.id+ "' ></span></label></div></td>"
                +"<td class='el-table_1_column_2 is-leaf' colspan='1' rowspan='1'><div class='cell'>" + d.orderNumber + "</div></td>"
                +"<td class='el-table_1_column_3 is-leaf' colspan='1' rowspan='1'><div class='cell'>" + stateStr + "</div></td>"
                +"<td class='el-table_1_column_4 is-leaf' colspan='1' rowspan='1'><div class='cell'>" + d.name + "</div></td>"
                +"<td class='el-table_1_column_5 is-leaf' colspan='1' rowspan='1'><div class='cell'>" + d.phone + "</div></td>"
                +"<td class='el-table_1_column_6 is-leaf' colspan='1' rowspan='1'><div class='cell'>" + d.address +"</div></td>"
                +"<td class='el-table_1_column_7 is-leaf' colspan='1' rowspan='1'><div class='cell'>" + d.orderTime+"</div></td>"
                +"<td class='el-table_1_column_8 is-leaf' colspan='1' rowspan='1'><div class='cell'>" + d.collection+"</div></td>"
                +"<td class='el-table_1_column_9 is-leaf' colspan='1' rowspan='1' style='width: 153px'><div>"
                +"<button type='button' class='el-button el-button--primary' onclick='chickMe(this)' style='width: 73px;'>状态</button>"
                +"<button type='button' class='el-button--primary el-button continue el-button--delete'>删除</button></div></td></tr>";
            tbody.append(tr);
            //每一行上面绑定当前行数据
            $("#tbodyId tr").last().data("order",data[i]);
        }
        $(".el-button--delete").on("click",deleteRoel);
    }

    function deleteRoel(){
        if(!confirm("确定删除吗")){
            return;
        }
        var url = "order/deleteOrder";
        //找到当前的tr绑定的roleId
        var tr = $(this).parents("tr");
        var id = tr.data("order").id;
        var param ={id:id};
        $.get(url,param,function(result){
            commonShowTips(result.message);
            //刷新数据
            doGetObjects()
        })
    }
    /**
     * 多选框全选事件方法
     */
    function commonChoiceAll() {
        //$():$包起来的是jq对象，是一个dom数组
        //加下标：变成js对象
        var firstInp = $(".el-checkbox__input input[type='checkbox']:first");
        var checked = firstInp[0].checked;//加下标变js对象
        //:gt(0) --->选择下标大于0的元素
        $(".el-checkbox__input input[type='checkbox']:gt(0)").prop("checked", checked);
    }


    //弹窗
    function chickMe(btn) {
        var tr = $(this).parents("tr");
        var id=$(btn).parents("tr").find("input[type='checkbox']").val();
        var orderState = $(btn).parents("tr").children().eq(2).text();
        var t1=$("#value1").val();
        var t2=$("#value2").val();
        var t3=$("#value3").val();
        var t4=$("#value4").val();
        if (orderState.indexOf(t1)!=-1){
            $("#value1").prop("checked",true);
        }else if(orderState.indexOf(t2)!=-1){
            $("#value2").prop("checked",true);
        }else if(orderState.indexOf(t3)!=-1){
            $("#value3").prop("checked",true);
        }else if(orderState.indexOf(t4)!=-1){
            $("#value4").prop("checked",true);
        }
        $("#orderId").val(id);
        let popup=document.getElementById("popup");
        popup.style.display="block";
        let popupde=document.getElementById("popupde");
        popupde.style.display="block";
    }

    //弹窗取消
    function cancel() {
        let popup=document.getElementById("popup");
        popup.style.display="none";
        let popupde=document.getElementById("popupde");
        popupde.style.display="none";
        console.log("您点击了取消");
    }
    //弹窗确定
    function confirme() {
        debugger
        var state = "";
        var id=$("#orderId").val();
        debugger;
        var stateStr = $(".el-god input[name='typeId']:checked").val();
        var url = "order/updateState";
        //找到当前的tr绑定的roleId
        if (stateStr == "上架"){
            state=1;
        }else if (stateStr == "下架"){
            state=2;
        }else if (stateStr == "已支付"){
            state=3;
        }else if (stateStr == "未支付"){
            state=4;
        }
        var param ={id:id,state:state};
        $.get(url,param,function(result){
            commonShowTips(result.message);
            //刷新数据
            doGetObjects()
        })
        let popup=document.getElementById("popup");
        popup.style.display="none";
        let popupde=document.getElementById("popupde");
        popupde.style.display="none";
    }
</script>